<template>
  <div class="add">
    <header>
      <span @click="backFn">
        <van-icon name="arrow-left" />
      </span>
      <flot>添加客户</flot>
      <span></span>
    </header>
    <div class="top">企业客户</div>
    <section>
      <p>*所属客户经理</p>
      <div class="p">
        <p>营业执照</p>
        <img v-show="user_img != ''" :src="user_img" alt="" />
        <van-uploader :after-read="afterRead" />
      </div>
      <div class="p">
        <p>*企业名称</p>
        <input
          type="text"
          v-model="add_user.name"
          placeholder="请输入企业名称"
        />
      </div>
      <div class="p">
        <p>*法人名称</p>
        <input
          type="text"
          v-model="add_user.f_name"
          placeholder="请输入法人名称"
        />
      </div>
      <div class="p">
        <p>*联系人名称</p>
        <input
          v-model="add_user.c_name"
          type="text"
          placeholder="请输入联系人名称"
        />
      </div>
      <div class="p">
        <p>*机构代码</p>
        <input
          v-model="add_user.id_number"
          type="text"
          placeholder="请输入机构代码"
        />
      </div>

      <div class="child">
        <div class="left">
          <div class="user_img">s</div>
          <div class="boxp">
            <p>system</p>
            <p>国邦盛世</p>
          </div>
        </div>
        <div class="right">
          <van-icon name="phone-o" />
        </div>
      </div>
      <div class="p">
        <p>*手机号</p>
        <input
          type="text"
          v-model="add_user.contact_manner"
          placeholder="请输入手机号"
        />
      </div>

      <div class="p">
        <p>账号（用于客户登录）</p>
        <input
          type="text"
          v-model="add_user.account"
          placeholder="请输入账号"
        />
      </div>
      <div class="p">
        <p>邮箱</p>
        <input type="text" v-model="add_user.email" placeholder="请输入邮箱" />
      </div>
      <div class="p" @click="dateFn">
        <p>省市区</p>
        <input type="text" placeholder="请选择省市区" />
      </div>
      <div class="p">
        <p>详细地址</p>
        <input type="text" placeholder="请输入详细地址" />
      </div>
    </section>
    <footer>
      <van-button @click="submitFn" round type="primary" block>提交</van-button>
    </footer>
  </div>
  <van-area
    v-show="date"
    @cancel="cancelFn"
    @confirm="sureFn"
    title="标题"
    :area-list="areaList"
  />
</template>

<script setup>
import { ref, reactive } from "vue";
import apis from "../../../utils/api_nots";
import { Toast } from "vant";

const add_user = reactive({
  account: "",
  address: "",
  area_code: null,
  c_name: "",
  city_code: null,
  contact_manner: "",
  email: "",
  f_name: "",
  id_number: "",
  id_type: 3,
  image_ids: [],
  name: "",
  pro_code: null,
  worker_id: 17,
});
const list = reactive({ value: [] });
const checked = ref("1");
const date = ref(false);
const checked_age = ref("1");
const user_img = ref("");
const user_img1 = ref("");
const areaList = {
  province_list: {
    110000: "北京市",
    120000: "天津市",
  },
  city_list: {
    110100: "北京市",
    120100: "天津市",
  },
  county_list: {
    110101: "东城区",
    110102: "西城区",
    // ....
  },
};

// 点击提交
function submitFn() {
  console.log(add_user);
  apis
    .add_firm(add_user)
    .then((res) => {
      if (res.data.code == 200) {
        Toast.success(res.data.msg);
        history.go(-1)
      } else {
        Toast.fail(res.data.msg);
      }
    })
    .catch((rej) => {
      console.log(rej);
    });
}

function cancelFn(v) {
  date.value = false;
}
// 点击确定
function sureFn(v) {
  console.log(v);
  date.value = false;
}
// 点击选择省市区
function dateFn() {
  date.value = true;
}
// 点击上传图片
const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  apis.update(file).then((res) => {
    console.log(res.data.data);
  });
  user_img.value = file.content;
};
// 点击上传图片
const afterRead1 = (file) => {
  // 此时可以自行将文件上传至服务器
  apis.update(file).then((res) => {
    console.log(res.data.data);
  });
  user_img1.value = file.content;
};

function backFn() {
  history.go(-1);
}
</script>

<style scoped>
.p img {
  width: 200px;
  height: 100px;
}
.van-area {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.p {
  box-sizing: border-box;
  padding: 0.53rem;
  border-top: 0.5rem solid #eee;
}
.p input {
  width: 100%;
  border: none;
}
.add {
  display: flex;
  flex-direction: column;
}
.right {
  font-size: 2rem;
}
footer dl {
  text-align: center;
  font-size: 1rem;
}
.user_img {
  width: 1rem;
  height: 1rem;
  background: blueviolet;
  color: white;
  padding: 1rem;
  font-size: 1.5rem;
  line-height: 1rem;
  border-radius: 50%;
}
.child {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left {
  display: flex;
  align-items: center;
  height: 100%;
}
.top {
  background: rgb(222, 204, 255);
  color: blue;
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  position: fixed;
  top: 2.3rem;
  z-index: 100;
}
footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  height: 3rem;
  background: white;
  z-index: 100;
}
section {
  padding: 3.3rem 0 3rem 0;
  overflow: auto;
}
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 2.3rem;
  background: blue;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 100;
}
header span {
  width: 1.3rem;
  font-size: 1.3rem;
}
</style>
